<template>
  <div>
    <div id="app">
      <!-- 添加总的标题 -->
      <h1 class="main-title">解放战争史</h1>
      <nav class="navbar">
        <div class="navbar-container">
          <ul class="nav-list">
            <li class="nav-item">
              <router-link to="/" class="nav-link">主页</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/home4" class="nav-link">综述</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/Persons" class="nav-link">重要人物</router-link>
            </li>
            <!-- <li class="nav-item">
              <router-link to="/Battle" class="nav-link">战争进程</router-link>
            </li> -->
            <li class="nav-item">
              <router-link to="/Important" class="nav-link">重要战役</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/Historys" class="nav-link">历史意义</router-link>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</template>

<style scoped>
html {
  font-family: "microsoft yahei, arial, helvetica, sans-serif";
  font-size: 16px;
  background-image: url("../assets/image/400.jpeg"); /* 确保路径正确 */
  background-size: cover; /* 覆盖整个页面 */
  background-position: center; /* 居中显示 */
  background-attachment: fixed; /* 固定背景，不随滚动条滚动 */
}
.app {
  padding: 0;
  margin: 0;
}
.main-title {
  text-align: center;
  color: #fff;
  background-color: #e70606;
  padding: 20px 0;
  margin: 0;
  font-size: 2rem;
}
.navbar {
  background-color: #810303;
  color: white;
  padding: 10px 20px;
  text-align: center;
}

.navbar-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-list {
  list-style: none;
  padding: 0;
  display: flex;
}

.nav-item {
  margin: 0 10px;
}

.nav-link {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease, background-color 0.3s ease;
  cursor: pointer;
  padding: 8px 16px; /* 添加padding以便看到背景色变化 */
}

.nav-link:hover {
  color: #ede109;
}

.nav-link:active {
  color: #d11414;
  background-color: #b83737; /* 添加背景色变化以实现高亮效果 */
}
</style>